<template>
  <div class="app-container">
    <el-button size="small" type="primary" plain @click="dialogFormVisible=true" >创建组织机构</el-button>
    <br>
    <br>
    <div v-for="(value, key, index) in orgList" :key="index">
      <el-tree
        :data="[value.tree]"
        :props="defaultProps"
        node-key="code"
        :highlight-current="true"
        ref="tree"
      ></el-tree>
    </div>

    <el-dialog title="创建组织机构" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="组织机构名称">
          <el-input v-model="org.name" />
        </el-form-item>
        <el-form-item label="code">
          <el-input v-model="org.code" />
        </el-form-item>
        <el-form-item label="描述信息">
          <el-input v-model="org.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getManagementClient } from '@/utils/authing-util'

export default {
  data() {
    return {
      dialogFormVisible: false,
      listLoading: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tree: {
        name: '',
        children: []
      },
      orgList: null,
      org: {
        name: '',
        description: '',
        code: ''
      }
    }
  },
  created() {
    this.fetchData(this.page)
  },
  methods: {
    handleCreate() {
      this.dialogFormVisible = false
      getManagementClient().org.create(this.org.name, this.org.description, this.org.code).then(res => {
        this.fetchData(this.page)
        this.$message({
          type: 'success',
          message: '创建成功!'
        })
      }).catch(error => {
        this.$message({
          type: 'error',
          message: `修改失败,错误信息:${error.message}`
        })
      })
    },
    fetchData(val) {
      this.page = val
      this.listLoading = true
      getManagementClient().org.list(this.page, this.size).then(res => {
        console.log(res)
        this.listLoading = false
        this.orgList = res.list
        this.total = res.totalCount
      })
    }
  }
}
</script>
